<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-10-22 14:59:40
 * @LastEditors: charles
 * @LastEditTime: 2021-10-25 22:36:48
-->
<template>
  <div class="order_list">
    <van-nav-bar title="我的订单"></van-nav-bar>
    <div class="order" v-for="o in orders.list" :key="o.id">
      <div class="header">
        <div class="code">
          <div><span>订单编号：</span>{{o.id}}</div>
          <div class="time">{{moment(o.orderTime).format('YYYY-MM-DD hh:mm') }}</div>
        </div>
        <div class="status">{{o.status}}</div>
      </div>
      <ul class="order_lines">
        <li class="order_line" v-for="l in o.orderLines" :key="l.id">
          <div class="name">
            <div class="img">
              <img :src="l.photo" alt="">
            </div>
            {{l.name}}
          </div>
          <div class="num">{{l.num}}</div>
        </li>
        <div class="buyerMessage" v-if="o.buyerMessage"><i class="iconfont icon-message_fill"></i> {{o.buyerMessage}}</div>
        <li class="consum">合计 ￥{{o.total}}</li>
      </ul>
    </div>
  </div>
</template>
<script>
import {computed,onMounted,ref} from 'vue'
import {useStore} from 'vuex'
import { get } from '../../../utils/request';
import moment from 'moment'
export default {
  setup() {
    let store = useStore();
    let orders = ref([])
    let user_info = computed(()=> store.state.user.user_info )


    let loadOrders =async  ()=>{
      let url = "/app/order/pageQuery"
      let params = {page:1,pageSize:100,customerId:user_info.value.id}
      let resp = await get(url,params);
      orders.value = resp.data;
    }

    onMounted(async ()=>{
      await loadOrders();
    })


    return {
      moment,
      orders
    }
  },
}
</script>
<style lang="scss" scoped>
.order_list {
  .order {
    background-color: #fff;
    padding: .5em;
    margin-bottom: 1em;
    .header {
      border-bottom: 1px solid #efefef;
      display: flex;
      padding: .5em 0;
      .code {
        text-align: left;
        flex: 1;
      }
      .status {
        text-align: right;
        color:#ee0a24
      }
    }
    ul.order_lines {
      padding: .5em 0;
      border-bottom: 1px solid #efefef;
      li.order_line {
        margin-bottom: 5px;
        display: flex;
        .name {
          flex:1;
          .img {
            width: 40px;
            height: 30px;
            overflow: hidden;
            float: left;
            margin-right: .5em;
            img {
              width: 100%;
            }
          }
        }
        .num {
          text-align: right;
        }
        .num::before {
          content:'x '
        }
      }
    }
    .buyerMessage {
      font-size: 12px;
      color:#999;
      line-height: 2em;
    }
    .consum {
      text-align: right;
    }
  }
}
</style>